<template>
	<div class="circle-footer">
		<div class="foot">
			<ul>
				<router-link to="/clips">
				<li class="one">
					<span>片花</span>
				</li>
				</router-link>
				<router-link to="/circle">
				<li class="two">
					<span>圈子</span>
				</li>
				</router-link>
				<router-link to="/other">
				<li class="three">
					<span>动态</span>
				</li>
				</router-link>
				<router-link to="/mine">
				<li class="four">
					<span>我的</span>
				</li>
				</router-link>
			</ul>
		</div>
	</div>
</template>

<script>
	
	export default {
		
		name:'circle_footer'
		
	}
	
</script>
<style lang="less" scoped>
table{ border-collapse: collapse; border-spacing: 0; }
body,p,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 { margin: 0; }
input,textarea,select { padding: 0; border: 1px solid #ccc;outline: 0; font-size: 100%; }
i{ font-style: normal; }
b{ font-weight: normal; }
input{ text-indent: 2em; }
ul,ol{ padding-left: 0; list-style: none; }
a{ text-decoration: none; }
a,img{ -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.clearfix:after { content: ""; display: block; height: 0; overflow: hidden; clear: both; }
body{ font-family: "微软雅黑"; font-size:16px; }

.circle-footer{
    .foot{
    	position: fixed;
		bottom: 0;
		background: #fff;
        height: 96/64rem;
        width: 100%;
        border-top: 1px solid #CB9CF0;
        ul{
        	width:530/64rem;
        	margin: 0 auto;
        	padding-top:14/64rem;
            li{
                text-align: center;
                float: left;
                width: 42/64rem;
                color: #a0a0a0;
                height: 100%;
                padding-top:51/64rem;
                margin-right:120/64rem;
                span{
                	font-size:20/64rem;
                	color:#000000;
                }
            }
            .one{
                background: url(../../../static/images/1/main_trailer_normal.png) no-repeat;
                background-size: 100%;
            }
            .two{
                background: url(../../../static/images/1/main_circle_selected.png) no-repeat;
                background-size: 100%;
                span{
                	color:#A54CE8;
                }
            }
            .three{
                background: url(../../../static/images/1/main_dynamic_normal.png)no-repeat;
                background-size: 100%;
            }
            .four{
                background: url(../../../static/images/1/main_profile_normal.png) no-repeat;
                background-size: 100%;
                margin-right:0;
            }
        }
    }
}
</style>